<template>
  <view>
    <wxTopStatus backgroundColor="#fff">
      <view style="width: 100%">
        <selectNav
          v-model="params.type"
          :list="navList"
          @change="navChange"
        ></selectNav>
      </view>
    </wxTopStatus>

    <view class="px-[30rpx]">
      <selectTags
        v-model="params.tab"
        :list="tagsList"
        @change="tabsChange"
      ></selectTags>
    </view>

    <!-- 帖子 -->
    <MeScrollPage type="body" :page="page" ref="MeScrollPageREF">
      <view class="px-[30rpx]">
        <template v-if="params.tab === 1">
          <template v-for="item in page.data" :key="item.id">
            <postCom
              :item="item"
              :type="params.type"
              @getList="MeScrollPageREF.resetData"
              @share="shareFn"
            ></postCom>
          </template>
        </template>
      </view>

      <!-- 视频 -->

      <template v-if="params.tab === 2">
        <videoList ref="videoListREF" :data="page.data"></videoList>
      </template>
    </MeScrollPage>

    <!-- 产品 -->
    <!-- <MeScrollPage v-if="params.tab === 3">
        <Waterfall></Waterfall>
      </MeScrollPage> -->
    <shareCom ref="shareComREF"></shareCom>
  </view>
</template>

<script lang="ts" setup>
import selectNav from "../../components/selectNav/index.vue";
import selectTags from "../../components/selectTags/index.vue";
import videoList from "../../components/videoList/videoList.vue";
import postCom from "../../components/postCom/psotCom.vue";
import Waterfall from "../../components/waterfall/index.vue";
import { getUserActionListAPI } from "@/api/common";
import { PageProps } from "@/hooks/usePage";

const MeScrollPageREF = ref();
const videoListREF = ref();
const shareComREF = ref();

const page = reactive<PageProps>({
  params: {
    type: 1,
    action: 13,
  },
  fetchData: getUserActionListAPI,
});

const params = ref({
  type: 1,
  tab: 1,
});
//  点赞收藏 切换
const navChange = (val) => {
  console.log(val);

  // params.value.tab = 1;
  page.params.type = val.index;
  page.params.action = "" + val.index + (params.value.tab === 1 ? 3 : 2);
  MeScrollPageREF.value.resetData();
};

// const vPage = reactive<PageProps>({});

const shareObj = ref({});

// 分享
const shareFn = (item) => {
  shareObj.value = item;
  shareComREF.value.shareFn(item);
};

onShareAppMessage((res) => {
  console.log(res, 12313);

  return {
    title: shareObj.value.nickname + "发布了新帖子", //分享标题
    path: "/views/subViews/post/postDetail/index?id=" + shareObj.value.id, // 可不填 传递的参数，只能是这', // 可不填 传递的参数，只能是这
    imageUrl:
      shareObj.value.pics && shareObj.value.pics.length
        ? shareObj.value.pics[0]
        : "", //封面图
  };
});

// 帖子  视频切换
const tabsChange = (val) => {
  console.log(val);
  if (val.index === 2) {
    page.params.type = params.value.type;
    page.params.action = "" + params.value.type + 2;
    page.beforeLoadingFn = () => {
      videoListREF.value.waterfallREF.resetLoadmore();
    };
  } else {
    page.params.type = params.value.type;
    page.params.action = "" + params.value.type + 3;
    page.beforeLoadingFn = undefined;
  }
  MeScrollPageREF.value.resetData();
};

const tagsList = [
  {
    text: "帖子",
  },
  {
    text: "视频",
  },
  // {
  //   text: "产品",
  // },
];

const navList = [
  {
    text: "点赞",
  },
  {
    text: "收藏",
  },
];
</script>

<style scoped lang="scss"></style>
